﻿@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_AdminLayout.cshtml";
}
<div id="app">
    <div class="box box-primary">
        <div class="box-header">
            <ol class="breadcrumb" style="padding:0px;margin:1px;">
                <li><a href="/SaleOrder/Index"><i class="fa fa-dashboard"></i>订单管理</a></li>
            </ol>
        </div>
        <div class="box-body">
            <el-row v-bind:gutter="20">
                <el-col v-bind:span="4">
                    <el-input v-model="table.args.OrderCode" placeholder="订单号" clearable></el-input>
                </el-col>
                <el-col v-bind:span="4">
                    <el-input v-model="table.args.ProductName" placeholder="商品名称" clearable></el-input>
                </el-col>
                <el-col v-bind:span="4">
                    <el-input v-model="table.args.ProductCode" placeholder="商品编码" clearable></el-input>
                </el-col>
                <el-col v-bind:span="4">
                    <el-input v-model="table.args.ReceiverName" placeholder="收货人" clearable></el-input>
                </el-col>
                <el-col v-bind:span="4">
                    <el-input v-model="table.args.ReceiverTel" placeholder="收货人电话" clearable></el-input>
                </el-col>
                @*<el-col v-bind:span="4">
            <store-selector v-model="table.args.storeId" placeholder="门店"></store-selector>
        </el-col>*@
                @*<el-col v-bind:span="4">
            <brand-selector v-model="table.args.brandIds" placeholder="品牌" ref="brandtable"></brand-selector>
        </el-col>
        <el-col v-bind:span="4">
            <category-selector v-model="table.args.categoryId" placeholder="品类"></category-selector>  v-on:change="onPayStatusChanged"
        </el-col>*@
                <el-col v-bind:span="4">
                    <el-select v-model="table.args.payStatus" placeholder="支付状态"  clearable>
                        <el-option key="0" value="请选择"></el-option>
                        <el-option v-for="item in payStatusOptions"
                                   v-bind:key="item.Key"
                                   v-bind:label="item.Value"
                                   v-bind:value="item.Key">
                        </el-option>
                    </el-select>
                </el-col>
            </el-row>
            <el-row v-bind:gutter="20" class="row-bottom">               
               
                <el-col v-bind:span="8">
                    <el-date-picker v-model="table.args.time" value-format="yyyy-MM-dd" type="daterange" range-separator="—" start-placeholder="制单日期起" end-placeholder="制单日期止">
                    </el-date-picker>
                </el-col>

            </el-row>
            <el-row class="row-bottom">
                <el-col v-bind:sm="12" v-bind:md="12">
                    <span class="input-group-btn">
                        <button type="button" class="btn btn-primary btn-flat" v-on:click="loadData()">查 询</button>                       
                        @*<a class="btn btn-warning btn-flat" href="/SaleOrder/CreateSo">新 增</a>*@
                    </span>
                </el-col>
            </el-row>
            <el-row>
                <el-col v-bind:span="24">
                    <el-table v-on:cell-click="cellClick" class="form-group" ref="$table" v-bind:data="table.rows" v-bind:height="table.height" border v-on:selection-change="selsChange" @*show-summary v-bind:summary-method="getSummaries"*@>
                        <el-table-column type="selection" width="55"></el-table-column>
                        <el-table-column type="index"></el-table-column>
                        <el-table-column prop="Code" label="订单号" width="170"></el-table-column>
                        @*<el-table-column prop="StoreName" label="销售门店" width="200"></el-table-column>*@
                        <el-table-column prop="ProductCode" label="商品编码" width="100"></el-table-column>
                        <el-table-column prop="ProductName" label="品名" width="150"></el-table-column>
                        <el-table-column prop="RealPrice" label="售价" width="60"></el-table-column>
                        <el-table-column prop="Quantity" label="数量" width="60"></el-table-column>
                        <el-table-column label="购买人" width="100">
                            <template slot-scope="scope">
                                <el-tag type="warning">[{{scope.row.MemberId}}]{{scope.row.MemberName}}</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column prop="PayStatusName" label="支付状态">
                            <template slot-scope="scope">
                                <el-tag :type="scope.row.PayStatus ==2 ? 'success' : 'info'"
                                        disable-transitions>{{scope.row.PayStatusName}}</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column label="推荐人" width="100">
                            <template slot-scope="scope">
                                <span v-if="scope.row.ReferName">
                                    <el-tag typeof="warning">[{{scope.row.ReferId}}]{{scope.row.ReferName}}</el-tag>
                                </span>
                                <span v-else></span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="ReceiverName" label="收货人"></el-table-column>
                        <el-table-column prop="ReceiverTel" label="收货人电话" width="120"></el-table-column>
                        <el-table-column prop="ReceiverFullAddress" label="收货人地址" width="200"></el-table-column>
                        <el-table-column prop="CreatedOnTime" label="下单时间" width="120"></el-table-column>
                        <el-table-column prop="StatusName" label="状态"></el-table-column>

                        <el-table-column prop="PaidDateTime" label="支付时间" width="120"></el-table-column>
                        <el-table-column prop="Remark" label="备注"></el-table-column>
                        <el-table-column label="操作" width="87" fixed="right">
                            <template slot-scope="scope">
                                @*<subpage-dialog type="text" text="详情" title="销售单详情" v-bind:buttons="[{ buttonId: 'cancel', text: '取消' , autolock: false }, { buttonId:'abandonSaleOrder' , text:'作废' , type:'danger', callback:abandonSaleOrder }]" v-bind:url="'/SaleOrder/ShowDetail?code='+scope.row.Code"></subpage-dialog>*@
                                <subpage-dialog type="text" text="详情" title="销售单详情" v-bind:buttons="[{ buttonId: 'cancel', text: '返回' , autolock: false }]" v-bind:url="'/SaleOrder/ShowDetail/'+scope.row.Id"></subpage-dialog>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination v-bind:current-page="table.page.pageIndex" v-bind:page-size="table.page.pageSize" v-bind:total="table.page.total"
                                   layout="total,sizes,prev,pager,next,jumper" @*v-bind:page-sizes="table.args.pageSize"*@
                                   v-on:size-change="onPageSizeChange" v-on:current-change="onPageChange" background>

                    </el-pagination> 
                </el-col>
            </el-row>
        </div>
        <!-- /.box-body -->
    </div>
    <div class="clearfix"></div>
</div>
@section scripts{
     <script src="~/Content/vue/plugins/subpage-dialog/subpage-dialog.js"></script>
    @*<script src="~/Content/vue/plugins/brand-selector/brand-selector.js" type="text/javascript"></script>
    <script src="~/Content/vue/plugins/category-selector/category-selector.js" type="text/javascript"></script>*@
    @*<script src="~/Content/vue/plugins/store-selector/store-selector.js" type="text/javascript"></script>*@
    <script src="~/Content/vue/plugins/product-selector/product-selector.js" type="text/javascript"></script>
    <script>
        // bootstrap the demo
        var demo = new Vue({
            components: {
            },
            el: '#app',
            data: {
                table: {
                    height: 450,
                    rows: [],
                    args: { ProductName: '', ProductCode: '', OrderCode: '', status: '',storeId:'',brandIds:'',payStatus:''
                        ,categoryId:'', createOnFrom: '', createOnTo: '', time: '', },
                    page: { total: 0, pageIndex: 1, pageSize: global_config.page.pageSize, isPaging: true }
                },
                payStatusOptions:@Html.Raw(ViewBag.payStatusOptions)
            },
            methods: {
                cellClick: function (row, column, cell, event) {

                },
                //获取选中的列
                selsChange: function (sels) {
                    this.sels = sels;
                },
                onPageChange: function (page) {
                    this.table.page.pageIndex = page;
                    this.loadData();
                },
                onPageSizeChange: function (pageSize) {
                    this.table.page.pageSize = pageSize;
                    this.loadData();
                },
                loadData: function () {
                    var _self = this;
                    var url = "/SaleOrder/GetSaleOrderList";
                    //设置时间
                    if (_self.table.args.time) {
                        _self.table.args.createOnFrom = _self.table.args.time[0];
                        _self.table.args.createOnTo = _self.table.args.time[1];
                    }
                    else{
                        _self.table.args.createOnFrom= '';
                        _self.table.args.createOnTo= '';
                    }
                    var data = Object.assign({}, _self.table.page, _self.table.args);
                    $.get(url, data, function (result) {
                        if (result.success) {
                            _self.table.rows = result.data;
                            _self.table.page.total = result.total;
                        }
                        else {
                            _self.$message({
                                message: result.error,
                                type: 'error'
                            });
                        }
                    }, "Json");
                },
                abandonSaleOrder: function () {
                    this.loadData();
                }
            },
            created: function () {
                setListPage(this.table, 293);
                 this.loadData();
            }
        });
    </script>
}






